<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>{{isset($settings['login_title'])?$settings['login_title']:''}}</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="prefix" content="{{ config('admin.prefix') }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- import css -->
    @include('admin.framework.layouts.style')
    <link rel="shortcut icon" type="image/x-icon" href="{{$settings['favicon']}}"/>
    <link rel="stylesheet" media="screen" href="/statics/v1/common/lib/captcha/vue-puzzle-vcode.css">
    <link rel="stylesheet" media="screen" href="/statics/v1/css/login.css">
    <!--[if IE ]>
    <div class="browers-tip">
        <div id="ie7tip">
            <img class="hint-logo" src="/statics/v1/image/common/browser-update/hint-logo.png" alt="温馨提示" title="温馨提示">
            <div class="hint" style="margin-top: 120x">温馨提示</div>
            <div class="update-text">您的浏览器版本过低，为了保证更好的使用体验，请升级您的浏览器</div>
            <div class="browser-title-box">
                <div class="left-line"></div>
                <div class="browser-title">常用浏览器下载</div>
                <div class="right-line"></div>
            </div>
            <div class="browser-links-box">
                <a class="browser browser-chrome" href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank">谷歌浏览器</a>
                <a class="browser browser-firefox" href="https://www.mozilla.org/zh-CN/firefox/" target="_blank">火狐浏览器</a>
                <a class="browser browser-ie" href="https://www.microsoft.com/zh-cn/edge" target="_blank">edge浏览器</a>
                <a class="browser browser-360" href="https://browser.360.cn/se/" target="_blank">360浏览器</a>
                <a class="browser browser-uc" href="https://www.uc.cn/" target="_blank">UC浏览器</a>
                <a class="browser browser-maxthon" href="https://www.maxthon.cn/" target="_blank">傲游浏览器</a>
                <a class="browser browser-qq" href="https://browser.qq.com/" target="_blank">QQ浏览器</a>
            </div>
        </div>
    </div>
    <style type="text/css">
        .browers-tip{position:fixed;background:#fff;width:100%;height:100%;z-index:99999999999;top:0;left:0;}
        #ie7tip{background:#fff;width:900px;position:absolute;left:50%;margin-left:-450px;top:15%;padding:20px;}
        #ie7tip .hint-logo {width:180px;display:block;margin:0 auto;}
        #ie7tip .hint {font-size:18px;font-weight:bold;text-align:center;color:#ff9900;}
        #ie7tip .update-text {font-size:24px;margin-top:40px;text-align:center;}
        #ie7tip .update-hint {font-size:18px;color:#9b9b9b;text-align:center;margin-top:10px;}
        #ie7tip .browser-title-box {width:900px;height:18px;margin:45px auto 0;overflow:hidden;}
        #ie7tip .left-line,.right-line {height:8px;width:365px;border-bottom:1px dotted #9b9b9b;float:left;display:inline-block;}
        #ie7tip .browser-title {font-size:14px;line-height:18px;height:18px;width:170px;text-align:center;color:#9b9b9b;float:left;display:inline-block;}
        #ie7tip .browser-links-box {width:900px;margin:20px auto 0;text-align:center;overflow:hidden;}
        #ie7tip .browser {background-position:12px 0;background-size:36px 36px;line-height:15px;height:63px;padding-top:48px;display:inline-block;width:60px;font-size:12#ie7tip px;text-align:center;color:#9b9b9b;vertical-align:top;background-repeat:no-repeat;text-decoration:none;margin-left:60px;}
        #ie7tip .browser:first-child {margin-left:0;}
        #ie7tip .browser-chrome {background-image:url(/statics/v1/image/common/browser-update/browser-chrome.png);}
        #ie7tip .browser-firefox {background-image:url(/statics/v1/image/common/browser-update/browser-firefox.png);}
        #ie7tip .browser-ie {background-image:url(/statics/v1/image/common/browser-update/browser-ie.png);}
        #ie7tip .browser-360 {background-image:url(/statics/v1/image/common/browser-update/browser-360.png);}
        #ie7tip .browser-uc {background-image:url(/statics/v1/image/common/browser-update/browser-uc.png);}
        #ie7tip .browser-maxthon {background-image:url(/statics/v1/image/common/browser-update/browser-maxthon.png);}
        #ie7tip .browser-qq {background-image:url(/statics/v1/image/common/browser-update/browser-qq.png);}
    </style>
    <![endif]-->
    <style>

    </style>
</head>
<body>
<div id="particles-js" style="{{!empty($settings['login_bg']) ? "background-image:url({$settings['login_bg']})" : ''}}">
    <div class="login" id="app-login" v-cloak>
        <div class="login_title">
            <a href="javascript:;">
                <div style="text-align: center; height: 50px; margin: 0 auto;">
                    <img src="{{$settings['login_logo'] ?? ''}}" style="{{!empty($settings['login_logo']) ? '' : 'display: none;'}}" alt="{{isset($settings['login_title'])?$settings['login_title']:''}}">
                </div>
            </a>
            <h2>{{isset($settings['login_title'])?$settings['login_title']:''}}</h2>
        </div>
        <div class="login_biaodan">
            <div class="kuang">
                <p>
                    <img src="/statics/v1/images/icon/name.png"/>
                    <span>用户名：</span>
                </p>
                <input type="text" placeholder="请填写用户名" v-model="formModel.account" autocomplete="off"/>
            </div>
            <div class="kuang">
                <p>
                    <img src="/statics/v1/images/icon/password.png" />
                    <span>密 &nbsp;&nbsp;码：</span>
                </p>
                <input placeholder="请填写密码" type="password" v-model="formModel.password" autocomplete="off"/>
            </div>

            <el-button @click="verify()" class="btn_check" :disabled="isCheckVerify">
                <div class="animate">
                    <div class="animate-logo"><i class="el-icon-s-help"></i></div>
                    <div class="animate-wave">
                        <div class="w1"></div>
                        <div class="w2"></div>
                        <div class="w3"></div>
                    </div>
                </div>
                <div>@{{ checkVerifyText }}</div>
            </el-button>

            <el-button type="primary"  @click="submit()" v-cloak  class="btn_check">登&nbsp;&nbsp;&nbsp;陆</el-button>
            <vue-puzzle-vcode :show="show" :imgs="imgs" @close="onTestClose" @success="onTestClose"></vue-puzzle-vcode>
        </div>

    </div>
    <div class="sk-rotating-plane"></div>
    <canvas class="particles-js-canvas-el" width="1536" height="675" style="width: 100%; height: 100%;"></canvas>
</div>
<!-- import JavaScript -->
@include('admin.framework.layouts.script')
<script src="/statics/v1/common/js/particles.min.js"></script>
<script src="/statics/v1/common/lib/captcha/vue-puzzle-vcode.js"></script>
<script src="/statics/v1/js/login.js"></script>
<script type="text/javascript">
    var $App = new Vue({
        el: '#app-login',
        mixins: [$Config,$Login],
        data: {
            formModel:{account:'', password:'', captcha:''},
            // captcha:'passport/captcha',
            layouts:{left:{show:false},header:{show:false}},
            isCheckVerify:false,checkVerifyText:'点击按钮进行验证',
            imgs: [
                "/statics/v1/images/verify_img001.png",
                "/statics/v1/images/verify_img002.png",
                "/statics/v1/images/verify_img003.png",
            ],
            show: false
        },
        methods:{
            verify(){
                var that = this;
                if (!that.checkVerifyParams()){
                    return false;
                }

                that.show = true
                that.isCheckVerify = true
                that.checkVerifyText = '正在验证'
            },
            onFail(){
                var that = this;
                that.show = false;
                that.isCheckVerify = false
                that.checkVerifyText = '点击按钮进行验证'
                that.formModel.captcha = ''
            },
            onTestClose(res) {
                var that = this;
                if(!res){
                    that.$message({message: '取消验证！', type: 'warning'});
                    that.onFail();
                    return false;
                }
                console.log(res);
                that.show = false;
                that.isCheckVerify = true
                that.checkVerifyText = '验证已完成'
                that.formModel.captcha = res
            },
            submit() {
                var that = this;
                if (!that.checkVerifyParams()){
                    return false;
                }

                if(that.isCheckVerify !== true){
                    that.$message({message: '请点击按钮进行验证！', type: 'warning'});
                    that.onFail();
                    return false;
                }
                // if(!that.formModel.captcha || !that.checkVerify(that.formModel.captcha))
                // {
                //     that.$message({message: '登录验证码错误！', type: 'warning'});
                //     return false;
                // }

                $Request.postJson($Utils.getAdminPrefix('passport/submit'), that.formModel, function (res)
                {
                    if(res.code === 200){
                        var currentItems = Cookies.get('f63dcfe3c89a14e80c9cdf60b4b94f4b');
                        that.$message({message: res.message, type: 'success', onClose:function () {}});
                        if($Validator.json(currentItems))
                        {
                            that.removeLocal();
                            currentItems = JSON.parse(currentItems);
                            $Request.get(currentItems.path, {});
                        } else {
                            that.removeLocal();
                            $Request.get($Utils.getAdminPrefix('/'), {});
                        }
                    } else {
                        that.$message({message: res.message, type: 'warning'});
                        that.onFail();
                        return false;
                    }
                })
                // setTimeout(function(){
                //
                // },5000)
            },
            checkVerifyParams(){
                var that = this;

                if(!that.formModel.account || !that.checkAccount(that.formModel.account))
                {
                    that.$message({message: '用户名或密码错误！', type: 'warning'});
                    that.onFail();
                    return false;
                }
                if(!that.formModel.password || !that.checkPassword(that.formModel.password))
                {
                    that.$message({message: '用户名或密码错误！', type: 'warning'});
                    that.onFail();
                    return false;
                }
                return true;
            },
            loginStart(){
                var that = this;
                that.addClass(document.querySelector(".login"), "active");
                setTimeout(function(){
                    that.addClass(document.querySelector(".sk-rotating-plane"), "active")
                    document.querySelector(".login").style.display = "none"
                },800)
            },
            successLogin(message,type){
                var that = this;
                that.removeClass(document.querySelector(".login"), "active")
                that.removeClass(document.querySelector(".sk-rotating-plane"), "active")
                document.querySelector(".login").style.display = "block"
                that.$message({message: message, type: type});
            },
            // 刷新captcha
            refreshCaptcha()
            {
                this.captcha = $Request.href($Utils.getAdminPrefix('passport/captcha'), {_t:$Request.random(10)});
                this.formModel.captcha = '';
            },

            checkPassword(value)
            {
                var reg=/^[a-zA-Z0-9\u4e00-\u9fa5_\-.,: ]{5,20}$/;
                if(reg.test(value)){
                    return true;
                } else {
                    return false;
                }
            },
            checkAccount(value)
            {
                var reg=/^[a-zA-Z0-9\u4e00-\u9fa5_\-.,: ]{5,20}$/;
                if(reg.test(value)){
                    return true;
                } else {
                    return false;
                }
            },
            checkVerify(value)
            {
                var reg=/^[a-zA-Z0-9]{4}$/;
                if(reg.test(value)){
                    return true;
                } else {
                    return false;
                }
            },
        },
        created() {
        },
        mounted(){
            var that = this;
            document.onkeydown = function(e)
            {
                var ev = document.all ? window.event : e;
                if(ev.keyCode === 13) {
                    that.submit();
                }
            };
        }
    })
</script>

</body>
</html>